import $ from 'jquery'
import * as joint from 'jointjs'
import Element from './element'
import * as cc from '../util/constants'
/**
 * 行转列节点
 */
const JointRowTransposer = joint.shapes.basic.RowTransposer = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable">' +
        `<rect class="background" width="${cc.ELEMENT_WIDTH}" height="${cc.ELEMENT_HEIGHT}" fill="none"/>` +
        '<path class="shadow" d="M32.1,8.9c0.5,0.7,0.9,1.6,0.9,2.6v16c0,2.5-2,4.5-4.5,4.5c-1,0-1.9-0.3-2.6-0.9c0.8,1.1,2.1,1.9,3.6,1.9 c2.5,0,4.5-2,4.5-4.5v-16C34,11,33.3,9.7,32.1,8.9z"/> ' +
        '<path class="shadow" d="M43.4,8.6c0.4,0.6,0.6,1.2,0.6,1.9c0,1.9-1.6,3.5-3.5,3.5h-2c-0.7,0-1.4-0.2-1.9-0.6c0.6,0.9,1.7,1.6,2.9,1.6h2 c1.9,0,3.5-1.6,3.5-3.5C45,10.3,44.4,9.2,43.4,8.6z"/> ' +
        '<path class="shadow" d="M54.4,8.6c0.4,0.6,0.6,1.2,0.6,1.9c0,1.9-1.6,3.5-3.5,3.5h-2c-0.7,0-1.4-0.2-1.9-0.6c0.6,0.9,1.7,1.6,2.9,1.6h2 c1.9,0,3.5-1.6,3.5-3.5C56,10.3,55.4,9.2,54.4,8.6z"/> ' +
        '<path class="shadow" d="M55.3,20.8l-1-1c0.4,0.4,0.4,1,0,1.4c-0.4,0.4-1,0.4-1.4,0l1,1c0.4,0.4,1,0.4,1.4,0 C55.7,21.9,55.7,21.2,55.3,20.8z"/> ' +
        '<path class="shadow" d="M47.2,21.2c-0.2,0.2-0.5,0.3-0.7,0.3c0,0.3,0.1,0.5,0.3,0.7c0.4,0.4,1,0.4,1.4,0l0.8-0.8v-2L47.2,21.2z"/> ' +
        '<path class="shadow" d="M51,24c0,3.3-2.7,6-6,6h-9v1h10c3.3,0,6-2.7,6-6v-4.6l-1-1V24z"/> ' +
        '<g class="stroke"> ' +
        '<path class="stroke1" d="M28.5,7C26,7,24,9,24,11.5v16c0,2.5,2,4.5,4.5,4.5s4.5-2,4.5-4.5v-16C33,9,31,7,28.5,7z M31,27.5 c0,1.4-1.1,2.5-2.5,2.5S26,28.9,26,27.5v-16c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5V27.5z"/> ' +
        '<path class="stroke1" d="M40.5,7h-2C36.6,7,35,8.6,35,10.5s1.6,3.5,3.5,3.5h2c1.9,0,3.5-1.6,3.5-3.5S42.4,7,40.5,7z M40.5,12h-2 c-0.8,0-1.5-0.7-1.5-1.5S37.7,9,38.5,9h2c0.8,0,1.5,0.7,1.5,1.5S41.3,12,40.5,12z"/> ' +
        '<path class="stroke1" d="M51.5,7h-2C47.6,7,46,8.6,46,10.5s1.6,3.5,3.5,3.5h2c1.9,0,3.5-1.6,3.5-3.5S53.4,7,51.5,7z M51.5,12h-2 c-0.8,0-1.5-0.7-1.5-1.5S48.7,9,49.5,9h2c0.8,0,1.5,0.7,1.5,1.5S52.3,12,51.5,12z"/> ' +
        '<path class="stroke1" d="M49,17v2.5V24c0,2.2-1.8,4-4,4H35v2h10c3.3,0,6-2.7,6-6v-4.6V17H49z"/> ' +
        '<path class="stroke1" d="M54.3,19.8l-3.5-3.5c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l1.7,1.7l1.9,1.9c0.4,0.4,1,0.4,1.4,0 C54.7,20.9,54.7,20.2,54.3,19.8z"/> ' +
        '<path class="stroke1" d="M50.7,16.3c-0.4-0.4-1-0.4-1.4,0l-3.5,3.5c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l1.8-1.8l1.7-1.7 C51.1,17.3,51.1,16.7,50.7,16.3z"/> ' +
        '</g> ' +
        '</g>',
    defaults: joint.util.deepSupplement({
        type: 'basic.RowTransposer',
        attrs: {
            size: {
                width: cc.ELEMENT_WIDTH,
                height: cc.ELEMENT_HEIGHT,
            },
            ".stroke": {},
            ".shadow": {
                'opacity': 0.3
            },
        }
    }, joint.shapes.basic.Generic.prototype.defaults)
})

class RowTransposer extends Element {
    constructor(...args) {
        super(...args)
        this._jointInstance = new JointRowTransposer(this.jointAttrs)
    }

    mixinAttr() {
        let mixin = {
            attrs: {
                '.stroke': {
                    fill: 'none'
                },
                '.shadow': {
                    fill: 'none'
                },
            }
        }
        $.extend(this.jointAttrs, mixin)
    }

    setColor(colorIndex) {
        super.setColor(colorIndex)
        let color = this.getColorFromIndex(colorIndex)
        this.jointInstance.attr('.stroke/fill', color)
        this.jointInstance.attr('.shadow/fill', color)
    }

}

export default RowTransposer